<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/favicon.png}"/>
    <link rel="bookmark" th:href="@{/favicon.png}"/>
    <title th:text="#{index.writePost}">发布</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
    <link href="/css/bootstrap-tagsinput.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.5/dist/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vditor@3.4.5/dist/index.min.js"></script>
    <style type="text/css">
        body {
        / / background-image: url("https://api.isoyu.com/bing_images.php");
            background-color: #efefef;
        }

        .issue-right {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: #efefef;
        }
        .bootstrap-tagsinput .label-info {
            border-radius: 4px;
            background-color: #1abc9c;
            color: #fff;
            font-size: 13px;
            cursor: pointer;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            overflow: hidden;
            margin: 0 5px 5px 0;
            padding: 6px 10px 6px 14px;
            transition: .25s linear;
        }
        span.tag-hand:hover {
            cursor: hand;
        }
    </style>
</head>
<body>
<!-- 标题栏 使用  fixed-top 将标题栏固定在顶部 -->
<div th:insert="~{navigation :: navbar}"></div>

<!-- 发布页面 -->
<div class="container" style="height: 30px">
</div>

<div class="container shadow-sm" style="background-color: white;">
    <div class="row">
        <div class="col-xl-9 mt-3 issue-right">
            <h2>
                <img src="/image/icon/publish.svg" width="45" height="45"/>
                [[#{publish.publish}]]
            </h2>
            <hr>
            <form id="submit_text" action="/publish" method="post" name="question" onsubmit="return submitText()">

                <!--问题标题--->
                <div class="row">
                    <div class="col-9">
                        <div class="form-group">
                            <label for="issues-title">[[#{publish.issue.title}]]</label>
                            <input autocomplete="off" name="title" type="text" class="form-control" id="issues-title"
                                   th:placeholder="#{publish.issue.Title}" th:value="${question.getTitle()}">
                            <small id="titleHelp" class="form-text" style="color: red"
                                   th:text="${titleMessage}"></small>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="issues-class">&nbsp;</label>
                            <select class="form-control" id="issues-class"
                                    name="classification">
                                <option value="null" style="display: none;">
                                    [[#{publish.classification}]]
                                </option>
                                <option th:selected="${question.getClassification()=='提问'}" value="提问">提问</option>
                                <option th:selected="${question.getClassification()=='讨论'}" value="讨论">讨论</option>
                                <option th:selected="${question.getClassification()=='分享'}" value="分享">分享</option>
                                <option th:selected="${question.getClassification()=='建议'}" value="建议">建议</option>
                                <option th:selected="${question.getClassification()=='Bug'}" value="Bug">Bug</option>
                                <option th:selected="${question.getClassification()=='灌水'}" value="灌水">灌水</option>
                            </select>
                            <small id="classHelp" class="form-text" style="color: red"
                                   th:text="${classMessage}"></small>
                        </div>
                    </div>
                </div>

                <!--问题内容--->
                <div id="question-edit" class="form-group mt-2">
                    <label for="issues-text">[[#{publish.issue.text}]]</label>
                    <textarea style="display: none;" id="issues-text-textarea" name="description" th:text="${question.getDescription()}"></textarea>
                    <div id="issues-text">

                    </div>
                </div>
                <small id="textHelp" class="form-text" style="color: red" th:text="${textMessage}"></small>
                <script src="/js/vditor/emoji_map.js" type="text/javascript"></script>
                <script src="/js/vditor.js" type="text/javascript"></script>

                <input type="hidden" name="questionId" th:value="${question.getQuestionId()}">
                <input type="hidden" name="createTime" th:value="${question.getCreateTime()}">

                <!-- 添加标签 -->
                <div class="row mt-4">
                    <div class="container" onclick="showMayTag()">

                        <label for="issues-tag">[[#{publish.issue.addTag}]]
                            <!--添加标签：-->
                        </label>

                        <input id="issues-tag" name="tag" class="tagsinput" data-role="tagsinput" value=""
                               th:value="${question.getTag()}" th:placeholder="#{publish.issue.splitTag}"
                               style="height: 50%;" autocomplete="off" />

                        <small id="tagHelp" class="form-text mb-2" style="color: red" th:text="${tagMessage}"></small>
                        <div id="many-tag-show" style="display: none;">
                            <nav>
                                <div class="nav nav-tabs mb-2" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="program-language-tab" data-toggle="tab" href="#program-language" role="tab" aria-controls="program-language" aria-selected="true">开发语言</a>
                                    <a class="nav-item nav-link" id="frame-work-tab" data-toggle="tab" href="#frame-work" role="tab" aria-controls="frame-work" aria-selected="false">平台框架</a>
                                    <a class="nav-item nav-link" id="server-tab" data-toggle="tab" href="#server" role="tab" aria-controls="server" aria-selected="false">服务器</a>
                                    <a class="nav-item nav-link" id="database-tab" data-toggle="tab" href="#database" role="tab" aria-controls="database" aria-selected="false">数据库缓存</a>
                                    <a class="nav-item nav-link" id="develop-tool-tab" data-toggle="tab" href="#develop-tool" role="tab" aria-controls="develop-tool" aria-selected="false">开发工具</a>
                                    <a class="nav-item nav-link" id="system-tab" data-toggle="tab" href="#system" role="tab" aria-controls="system" aria-selected="false">系统设备</a>
                                    <a class="nav-item nav-link" id="have-fun-tab" data-toggle="tab" href="#have-fun" role="tab" aria-controls="have-fun" aria-selected="false">休闲灌水</a>

                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <!--开发语言-->
                                <div class="tab-pane fade show active" id="program-language" role="tabpanel" aria-labelledby="program-language-tab">
                                    <span class="badge btn btn-primary btn-sm mr-2 tag-hand" onclick="addTag('JavaScript')">
                                        <span class="ml-1">JavaScript</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('PHP')">
                                        <span class="ml-1">PHP</span>
                                     </span>
                                    <span class="badge badge-secondary mr-2 tag-hand" onclick="addTag('Java')">
                                        <img src="/image/icon/java.svg" height="10px">
                                        <span class="ml-1">Java</span>
                                     </span>
                                    <span class="badge badge-info mr-2 tag-hand" onclick="addTag('HTML')">
                                        <span class="ml-1">HTML</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('CSS')">
                                        <span class="ml-1">CSS</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('Python')">
                                        <span class="ml-1">Python</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('C/C++')">
                                        <span class="ml-1">C/C+</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('C#')">
                                        <span class="ml-1">C#</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('Go')">
                                        <span class="ml-1">Go</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('objective-c')">
                                        <span class="ml-1">objective-c</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('typescript')">
                                        <span class="ml-1">typescript</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('shell')">
                                        <span class="ml-1">shell</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('swift')">
                                        <span class="ml-1">swift</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('ruby')">
                                        <span class="ml-1">ruby</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('lua')">
                                        <span class="ml-1">lua</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('scala')">
                                        <span class="ml-1">scala</span>
                                     </span>
                                    <span class="badge badge-primary mr-2 tag-hand" onclick="addTag('Kotlin')">
                                        <span class="ml-1">Kotlin</span>
                                     </span>
                                </div>
                                <!--平台框架-->
                                <div class="tab-pane fade" id="frame-work" role="tabpanel" aria-labelledby="frame-work-tab">
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Spring')">
                                        <span class="ml-1">Spring</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Django')">
                                        <span class="ml-1">Django</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Flask')">
                                        <span class="ml-1">Flask</span>
                                     </span>
                                </div>
                                <!--服务器-->
                                <div class="tab-pane fade" id="server" role="tabpanel" aria-labelledby="server-tab">
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Linux')">
                                        <span class="ml-1">Linux</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Nginx')">
                                        <span class="ml-1">Nginx</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Docker')">
                                        <span class="ml-1">Docker</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Ubuntu')">
                                        <span class="ml-1">Ubuntu</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Centos')">
                                        <span class="ml-1">Centos</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Apache')">
                                        <span class="ml-1">Apache</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Windows Server')">
                                        <span class="ml-1">Windows Server</span>
                                     </span>
                                </div>
                                <!--数据缓存-->
                                <div class="tab-pane fade" id="database" role="tabpanel" aria-labelledby="database-tab">
                                    <span class="badge badge-info mr-2 tag-hand" onclick="addTag('MySql')">
                                        <span class="ml-1">MySql</span>
                                     </span>
                                    <span class="badge badge-danger mr-2 tag-hand" onclick="addTag('redis')">
                                        <span class="ml-1">redis</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('mongoDb')">
                                        <span class="ml-1">mongoDb</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('noSql')">
                                        <span class="ml-1">noSql</span>
                                     </span>
                                    <span class="badge badge-info mr-2 tag-hand" onclick="addTag('SqlLite')">
                                        <span class="ml-1">SqlLite</span>
                                     </span>
                                    <span class="badge badge-info mr-2 tag-hand" onclick="addTag('Oracle')">
                                        <span class="ml-1">Oracle</span>
                                     </span>
                                    <span class="badge badge-info mr-2 tag-hand" onclick="addTag('SQL Server')">
                                        <span class="ml-1">SQL Server</span>
                                     </span>
                                    <span class="badge badge-info mr-2 tag-hand" onclick="addTag('H2')">
                                        <span class="ml-1">H2</span>
                                     </span>
                                </div>
                                <!--开发工具-->
                                <div class="tab-pane fade" id="develop-tool" role="tabpanel" aria-labelledby="develop-tool-tab">
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Git')">
                                        <span class="ml-1">Git</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('VS Code')">
                                        <span class="ml-1">VS Code</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Visual Studio')">
                                        <span class="ml-1">Visual Studio</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Vim')">
                                        <span class="ml-1">Vim</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('IDEA')">
                                        <span class="ml-1">IDEA</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('eclipse')">
                                        <span class="ml-1">eclipse</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('maven')">
                                        <span class="ml-1">maven</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Gradle')">
                                        <span class="ml-1">Gradle</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('NetBeans')">
                                        <span class="ml-1">NetBeans</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('PyCharm')">
                                        <span class="ml-1">PyCharm</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Navicat')">
                                        <span class="ml-1">Navicat</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('CLion')">
                                        <span class="ml-1">CLion</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('PhpStorm')">
                                        <span class="ml-1">PhpStorm</span>
                                     </span>
                                </div>
                                <!--系统设备-->
                                <div class="tab-pane fade" id="system" role="tabpanel" aria-labelledby="system-tab">
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Android')">
                                        <span class="ml-1">Android</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('ios')">
                                        <span class="ml-1">ios</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('Windows')">
                                        <span class="ml-1">Windows</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('MacOS')">
                                        <span class="ml-1">MacOS</span>
                                     </span>
                                </div>
                                <div class="tab-pane fade" id="have-fun" role="tabpanel" aria-labelledby="have-fun-tab">
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('体育')">
                                        <span class="ml-1">体育</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('娱乐八卦')">
                                        <span class="ml-1">娱乐八卦</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('闲聊')">
                                        <span class="ml-1">闲聊</span>
                                     </span>
                                    <span class="badge badge-success mr-2 tag-hand" onclick="addTag('游戏')">
                                        <span class="ml-1">游戏</span>
                                     </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 验证码：-->
                <div class="row mt-4">
                    <div class="col text-right">
                        <a href="javascript:void(0);">
                            <img title="点击刷新" src="/captche/images" onclick="this.src='/captche/images?'+Math.random()"/>
                        </a>
                    </div>
                    <div class="form-group mr-3">
                        <input type="text" autocomplete="off" class="form-control" id="issues-CAPTCHA" name="CAPTCHA"
                               th:placeholder="#{publish.issue.CAPTCHA}">
                        <small id="CAPTCHAHelp" class="form-text" style="color: red"
                               th:text="${CAPTCHAMessage}"></small>
                    </div>
                </div>

                <!-- 提交 -->
                <div class="form-group mt-2 text-right">

                    <input id="submit_input_text" onkeydown="if(event.keyCode==13)return false;" type="submit" class="btn btn-success btn-lg" style="width: 200px"
                           th:value="#{publish.issue.submit}"/>
                </div>
            </form>
        </div>

        <div class="col">
            <br/>
            <br/>
            <h5>问题发起指南</h5>
            <br/>
            <small class="text-muted">•<span style="font-weight: bold;">问题标题：</span>请用<span
                    style="color: red; font-weight: bold;">精简</span>的语言描述您发布的问题，不超过25字。
            </small>
            <br/><br/>
            <small class="text-muted">•<span style="font-weight: bold;">问题补充：</span>详细补充您的问题内容，并确保问题描述清晰直观, 并提供一些相关的资料。
            </small>
            <br/><br/>
            <small class="text-muted">•<span style="font-weight: bold;">选择标签：</span>选择一个或者多个合适的标签，用逗号隔开，每个标签不超过10个字。
            </small>
            <br/><br/>
            <h5>编辑器使用指南</h5>
            <br/>
            <small class="text-muted">•<span style="font-weight: bold;">关闭实时预览：</span>点击编辑器菜单栏上的眼睛图标即可关闭。
            </small>
            <br/><br/>
            <small class="text-muted">•<span style="font-weight: bold;">emoji表情：</span>选中表情后点击确认即可添加，直接点击表情是没办法添加的。
            </small>
            <br/><br/>
            <small class="text-muted">•<span style="font-weight: bold;">文件上传指南：</span>点击编辑器菜单栏上的上传图标即可选择上传文件或图片，最大支持<span
                    style="color: red; font-weight: bold;">10MB</span>的文件或图片上传。<br/>
                    <small th:text="#{publish.issue.supportFile}"></small>
            </small>
            <br/><br/>
            <small class="text-muted">•<span style="font-weight: bold;">最后：</span>友善发帖，并遵守国家相关法律法规，互联网并非法外之地。</small>
            <div class="container mt-2 text-center"><img class="border w-100"
                                                         src="/image/v2-c277d2ad52b61fcd3fa82577575efc4c_r.jpg"/></div>
            <br/><br/>
            <br/><br/>
            <div class="container" style="">
                广告位招租
            </div>
            <br/>
            <!-- 图片轮播 -->
            <div id="Advertisement" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators" >
                    <li th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'active' : ''" data-target="#Advertisement"  th:data-slide-to="${adStat.index}"></li>
                </ol>
                <div class="carousel-inner">
                    <div th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'carousel-item active' : 'carousel-item'">
                        <a th:href="'/adUrl' + @{/(url=${ad.url},id=${ad.id})}" target="_blank">
                            <img class="d-block w-100" th:src="${ad.image}" th:alt="${ad.title}" th:title="${ad.title}">
                            <div class="carousel-caption d-none d-md-block mb-0" style="border-bottom: 0px">
                                <p class="mb-0" th:text="${ad.title}"></p>
                            </div>
                        </a>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#Advertisement" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#Advertisement" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="container" style="height: 30px">
</div>
<!-- 页脚 -->
<div th:insert="~{footer :: footer}"></div>
<script>
    function submitText() {
        const text = document.getElementById("issues-text-textarea");
        text.value = vditor.getValue();
        console.log(text.value);
        if (text.value === "\n") {
            return false;
        } else {
            vditor.clearCache();
            return true;
        }
    };
</script>
<script src="/js/tag/bootstrap-tagsinput.min.js"></script>
<script src="/js/url.js" type="text/javascript"></script>
<script src="/js/publish.js" type="text/javascript"></script>
</body>
</html>
